<template>
  <el-dialog
    :title="title"
    :visible.sync="isShowRole"
    :width="width"
    top="20vh"
    :closeOnClickModal="false"
    :before-close="dialogBeforeClose"
    :modal-append-to-body="moalAppendBody"
    :append-to-body="appendBody"
  >
    <slot></slot>
    <div v-if="isShowFooter" slot="footer">
      <slot name="footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="confirmDialog">确 定</el-button>
      </slot>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "Dialog",
  props: {
    isShowRole: {
      type: Boolean,
      require: true,
    },
    title: {
      type: String,
      require: true,
    },
    width: {
      type: String,
      require: true,
    },
    isShowFooter: {
      type: Boolean,
      default: () => true,
    },
    appendBody: {
      type: Boolean,
      default: () => false,
    },
    modalAppendBody: {
      tyoe: Boolean,
      default: () => true,
    },
  },
  methods: {
    closeDialog() {
      this.$emit("closeDialog");
    },
    confirmDialog() {
      this.$emit("confirmDialog");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 24px;
}
</style>
